<template>
    <div>
        <h1>商品{{$route.params.id}}</h1><hr>
        <carousel :pic="pic"></carousel>
        <div>商品描述</div>
        <div class='goodInfo'>
            <div class="left">商品数量：<br>
            <div class="havaBall"><transition name="tl">
                <div class="ball" v-show="ballShow"></div>
            </transition><number @changenum="updateNum" :maxNum="maxNum"></number></div>
            </div>
            <div class="right">商品价格<br>
             $100</div>
        </div>
        <div>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
        </div>
    </div>
</template> 
<script>
    import carousel from '../carousel.vue';
    import number from '../number.vue';
    export default {
        data(){
            return {
                pic:[
                    {img:'/src/images/menu2.png'},
                    {img:'/src/images/menu3.png'},
                    {img:'/src/images/menu4.png'},
                    {img:'/src/images/menu5.png'},
                    {img:'/src/images/menu6.png'}
                ],
                ballShow:false,
                num:1,
                maxNum:'',
                price:100
            }
        },
        components:{
            carousel,
            number
        },
        methods:{
            addShopCar(){
                this.ballShow = ! this.ballShow;
                var obj = {
                    id:this.$route.params.id,
                    count:parseInt(this.num),
                    price:this.price,
                    isSelect:true
                }
                this.$store.commit('addToCar',obj);
                console.log(this.$store.state.car)
            },
            updateNum(num){
                this.num = num;
            }
        },
        created(){
            setTimeout(()=>{
                this.maxNum = 60
            },2000)
        }
    }
</script>
<style lang="less" scoped>
    h1{
        text-align:center;
    }
    .goodInfo{
        position:relative;
        border:2px dotted red;
        margin-top:10px;
        overflow:hidden;
        padding:10px;
        .left{
            width:50%;
            float:left;
        }
        .right{
            width:50%;
            float:right;
        }
    }
    .havaBall{
        display:inline-block;
        position:relative;
        .ball{
            width:16px;
            height:16px;
            background-color:red;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-8px;
            margin-top:-18px;
            z-index:1000;
            border-radius:50%;
        }
    }
    
    
</style>